<template>
	<view class="search-detail">
		<view class="search-detail-top">
			<!-- #ifdef H5 || APP-PLUS -->
			<image src="../../static/common/goback.png" class="goback" @tap="goback"></image>
			<!-- #endif -->
			<view class="search-box" @tap="goSearch">
				<image src="../../static/common/search.png" class="search-icon"></image>
				<input type="text" placeholder="复制宝贝标题快速搜索" 
				 disabled="disabled"
				 confirm-type="search"
				 class="uni-input search-input" placeholder-class="input-placeholder" />
				 <image src="../../static/common/close.png" class="close-btn" v-if="isShow" ></image>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="select-type">
			<view class="select-item" 
			v-for="(item,index) in navTab" :key="index"
			@tap="filterGood(index)"
			>
				<view class="select-new" :class="{'selectd-item':index == selectId}">{{item}}</view>
			</view>
			
			<!-- <view class="select-item filters">
				<view class="select-new" @tap="filterType">筛选</view>
			</view> -->
		</view>
		<!-- 搜索列表 -->
		<scroll-view  scroll-y="true" 
		class="scroll-Y scroll-box" 
		 :scroll-top="scrollTop"
		lower-threshold="100" @scrolltolower="loadMore">
			<view class="goodsList">
				<view class="nodata" v-if="nodata">
					<image src="../../static/common/nodata.png" class="nodata-img"></image>
				</view>
				<view v-for="(goods,index) in dataList" :key="index">
					<good :goodsInfo="goods" @goodsDetail="goodsDetail"></good>
				</view>
			
			</view>
			
		</scroll-view>
		<!-- 筛选抽屉 -->
		<uni-drawer :visible="visible" mode="right">
		    <view class="drawer-block">
		        <view class="goods-title padding-top">商品类别</view>
						<view class="classification-block">
							<view class="classification-item">女装</view>
							<view class="classification-item">女装</view>
							<view class="classification-item">女装</view>
							<view class="classification-item">女装</view>
							<view class="classification-item">女装</view>
						</view>
						<view class="goods-title goods-source">商品来源</view>
						<view class="classification-block">
							<view class="classification-item">天猫</view>
						</view>
						<view class="goods-title goods-source">价格区间(元)</view>
						<view class="price-section">
							<input class="uni-input price-input lower-price" type="digit" placeholder="最低价" />-
							<input class="uni-input price-input uper-price" type="digit" placeholder="最高价" />
						</view>
						<view class="recommend-price">
							<view class="recommend-block">
								<view class="recommend-price-block">0-69</view>
								<view class="recommend-chose">33%的选择</view>
							</view>
							<view class="recommend-block">
								<view class="recommend-price-block">69-173</view>
								<view class="recommend-chose">60%的选择</view>
							</view>
							<view class="recommend-block">
								<view class="recommend-price-block">173-399</view>
								<view class="recommend-chose">9%的选择</view>
							</view>
						</view>
						<view class="edit-btn">
							<view class="reset-btn" @tap="closeMask">重置</view>
							<view class="confirm-btn">确定</view>
						</view>
		    </view>
		</uni-drawer>
	</view>
</template>

<script>
	const util = require('../../util/util.js');
	import good from'../../components/goods/good.vue'
	import uniDrawer from '../../components/uni-drawer/uni-drawer.vue'
	export default{
		data(){
			return{
				isShow:false,
				visible:false,
				dataList:[], //搜索结果列表
				q:"",        //搜索关键词
				nodata:false,//暂无数据标识
				page_no:1,  //当前页数
				page_size:10, //每页数据个数
				apptoken:"",
				selectId:0,//navtab标识
				navTab:["最新","价格","销量","佣金"],
				sort:"",//排序
				scrollTop:-1,//回到顶部标识
			}
		},
		components:{
			good,
			uniDrawer
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
			this.getSearchList();
			//事件监听搜索结果
			// uni.$on('getlist',(data) => {
			// 	console.log(data.getlist)
				
			// })
			//this.dataList = this.$store.state.searchList;
			//console.log(this.$store.state.searchList)
		},
		methods:{
			goodsDetail(id){
				//console.log(coupon)
				//商品详情
					this.$CommonJS.navigateTo('../goodDetail/good-detail?id='+id);
				//this.$CommonJS.navigateTo('../goodDetail/good-detail?coupon='+coupon.coupon+'&startTime='+coupon.startTime+'&endTime='+coupon.endTime);
			},
			filterGood(index){
				console.log(index);
				this.selectId = index;
				this.page_no = 1;
				this.scrollTop = 0;
				const data = {q:this.q,page_no:this.page_no,page_size:100,apptoken:this.apptoken,sort:""};
				switch(index){
					case 0:
						this.sort = "";
						data.sort = "";//降序排序
						break;
					case 1:
						this.sort = "price_des";
						data.sort = "price_des";//价格
						break;
					case 2:
						this.sort = "total_sales_des";
						data.sort = "total_sales_des";//销量
						break;
					case 3:
						this.sort = "tk_total_commi_des";
						data.sort = "tk_total_commi_des";//佣金
						break;
				}
				this.requestData(data);
				
			},
			//搜索列表
			getSearchList(){
				const self = this;
				uni.getStorage({
				    key: 'search_key',
				    success: function (res) {
				        console.log(res.data);
								self.q = res.data;
								const data = {q:res.data,page_no:1,page_size:100};
								self.requestData(data)
				    }
				});
				
			},
			requestData(data,type){
				const self = this;
				console.log(JSON.stringify(data))
				uni.request({
					url:self.$API.URL + self.$API.tbk_super_search,
					data:data,
					success(res){
						//console.log(res)
						if( res.data.success){
							if(res.data.msg.data.length>0){
								if(type != "loadmore"){
									self.dataList = [];
									self.scrollTop = -1; //回到顶部
								}
								uni.hideLoading()
								self.nodata = false;
								self.page_no = self.page_no + 1;
								res.data.msg.data.map(item => {
									self.dataList.push(item);
								})
							}else{
								self.nodata = true;
							}
							
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:"none"
							})
							
						}
						
					}
				})
			},
			//分页加载，防抖
			loadMore: util.throttle(function(e) {
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				const data = {q:this.q,page_no:this.page_no,page_size:this.page_size,sort:this.sort};
				this.requestData(data,"loadmore")
			}, 300),
			//搜索
			goSearch(){
				this.$CommonJS.navigateTo('./search');
			},
			//筛选
			filterType(){
				this.visible = true
			},
			//重置
			closeMask(){
				this.visible = false;
			},
			goback:function(){
				this.$CommonJS.navigateBack();
			}
		}
	}
</script>

<style>
	@import url("searchDetail.css");
</style>
